<%@page import="com.alibaba.fastjson.JSONArray"%>
<%@page import="com.alibaba.fastjson.JSONObject"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>邀请二维码</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">

    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <style type="text/css">
        body{font-size: 14px;}.dataTables_info {font-size: 12px}.dataTables_paginate {font-size: 12px;}
        .yellow_circle{
            width: 120px;
            height: 120px;
            background: #fee087;
            border-radius: 50%;
            padding-top: 30px;
            margin: 4px;
        }
        .yellow_circle p{
            color: #333;
            text-align: center;
        }
        .yellow_circle p.people{
            color: #8f721c;
            font-size: 20px;
        }
        .yellow_circle_border{
            width:130px;
            height:130px;
            border:1px solid #fee087;
            border-radius: 50%;
            display: inline-block;
        }
        .k_blue {
            border-color: #c9cff5;
        }
        .k_blue .yellow_circle {
            background: #c9cff5;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-fluid">
    <ul style="margin-top:15px;padding-left: 10px; ">二维码 > 邀请二维码 ><lable class="staffName"></lable>的邀请二维码统计</ul>



    <div style="height: 40px;"></div>
    <div class="row" style="width: 98%; background: #FDFDFD;margin-left: 15px;height: 220px;">
        <div style="padding-top: 20px;padding-left: 20px;font-weight: bold;"><lable class="staffName"></lable>的邀请二维码统计</div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-2 text-center" style="    margin-left: -7%;margin-top: 15px;">
            <div class="yellow_circle_border"><div class="yellow_circle"><p>总扫码次数</p><p class="people"><span>0</span><br/></p></div></div>
        </div>
        <div class="col-sm-2 text-center" style="padding-left: 22%;margin-top: 15px;">
            <div class="yellow_circle_border" style="border: 1px solid #D5C9E4;"><div class="yellow_circle" style="background-color:#D5C9E4;"><p>总扫码人数</p><p class="people"  style="color: #605296;"><span>0</span><br/></p></div></div>
        </div>
        <div class="col-sm-2 text-center" style="padding-left: 40%;margin-top: 15px;">
            <div class="yellow_circle_border"><div class="yellow_circle"><p>总关注数</p><p class="people"><span>0</span><br/></p></div></div>
        </div>
    </div>
    <div class="col-sm-3 col-sm-offset-1" style="float: right;padding-top: 26px;">
        <div class="input-daterange input-group">
            <input type="text" class="input-sm form-control" name="datetimepicker_start" readonly style="background-color: white;">
            <span class="input-group-addon" style="background-color: #eeeeee;">到</span>
            <input type="text" class="input-sm form-control" name="datetimepicker_end" readonly style="background-color: white;">
        </div>
    </div>

    <div style="margin-left: 15px;margin-top: 27px;width: 10%;height: 40px; background: #FDFDFD;"><label style="padding-left: 30px;padding-top: 10px;">扫码趋势</label></div>
    <div class="row"  style="background: #FDFDFD;width: 98%;margin-left: 15px;">
        <div class="col-sm-12">
            <div id="memberLine" style="height: 400px;"></div>
        </div>
    </div>
    <div style="height: 40px;"></div>

    <div class="row" style="margin-top: -40px;background: #FDFDFD;width: 98%;margin-left: 15px;">
        <div class="col-sm-12" style="padding-top: 35px;">
            <table id="myTable" class="table table-bordered table-striped table-hover" style="font-size:12px;">
                <thead>
                <tr>
                    <th>日期</th>
                    <th>扫码次数</th>
                    <th>扫码人数</th>
                    <th>关注人数</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <div style="margin-left: 15px;margin-top: 27px;width: 10%;height: 37px; background: #FDFDFD;"><label style="padding-left: 30px;padding-top: 10px;">邀请用户</label></div>
    <div class="row" style="background: #FDFDFD;width: 98%;margin-left: 15px;">
        <div class="col-sm-12" style="margin-top: 20px;">
            <table id="myTable1"  class="table table-bordered table-striped table-hover"   style="font-size:12px;">
                <thead>
                <tr>
                    <th>微信昵称</th>
                    <th>OpenID</th>
                    <th>关注时间</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.common.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/dateUtils.js?v=1.0.0"></script>

<script type="text/javascript">
    var path = "<%=path%>";
    var myDataTable = null;
    var myDataTable1 = null;
    var startTime = "";
    var endTime = "";
    var id;
    var staffName;
    var storeArr = [{"storeId":2,"storeName":"22"},{"storeId":1,"storeName":"11"}];
    var reportAllIndex = 0;
    var COLORS = ['#ffce67','#d59dff','#ffa954','#ff6668','#1db75f','#2192ca','#fbb16c','#6e53d6','#6badff','#8f72fe','#0072ff'];

    $(function(){
        var now = new Date();
        startTime = getQueryString("startTime");
        // endTime = getDate(-1,new Date());
        endTime = getDate(0,new Date())+" 23:59:59";
        if (dateDiff(startTime,endTime)>90){
            startTime=getDate(-90,convertDateFromString(endTime));
        }
        // if (startTime > endTime) {
        //     endTime=startTime;
        //     startTime=startTime+" 00:00:00";
        //     endTime=endTime+" 23:59:59";
        // }
        $("input[name='datetimepicker_start']").val(startTime.split(" ")[0]);
        $("input[name='datetimepicker_end']").val(endTime.split(" ")[0]);

        $("input[name='datetimepicker_start']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2,
            startDate:startTime})
            .on("click",function(){
                $("input[name='datetimepicker_start']").datetimepicker("setEndDate",$("input[name='datetimepicker_end']").val())
            }).on('changeDate', function(ev){
            $(".btn-group>button:eq(0)").removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
            startTime = $("input[name='datetimepicker_start']").val()+" 00:00:00";
            init();
        });
        $("input[name='datetimepicker_end']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2,endDate:endTime}).on("click",function(){
            $("input[name='datetimepicker_end']").datetimepicker("setStartDate",$("input[name='datetimepicker_start']").val())
        }).on('changeDate', function(ev){
            $(".btn-group>button:eq(0)").removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
            endTime = $("input[name='datetimepicker_end']").val()+" 23:59:59";
            init();
        });
        init();
    });

    function init(){
        id=getQueryString("id");
        staffName=getChineseQueryString("staffName");
        $(".staffName").html(staffName);
        if(startTime=="" && endTime==""){
            var now = new Date();
            now.setDate(now.getDate()-1);
            startTime = now.Format("yyyy-MM-dd");
            endTime = startTime;
            $("input[name='datetimepicker_start']").val(startTime);
            $("input[name='datetimepicker_end']").val(endTime);
        }
        func_sumAll();
        func_memberLine();
        if(myDataTable == null){
            myDataTable = dataTable();
        }else{
            func_dataTableReload(true);
        }
        if(myDataTable1 == null){
            myDataTable1 = dataTable1();
        }else{
            func_dataTableReload1(true);
        }
    }

    function func_sumAll(){
        $.get(
            path + "/wxqrCode/ajaxGetStatisticsData",
            {
                "id":id,
            },
            function(data){
                if(data.status == "200"){
                    $(".people:eq(0)>span").text(data.data.sweepNumber);
                    $(".people:eq(1)>span").text(data.data.sweepPeopleNumber);
                    $(".people:eq(2)>span").text(data.data.focusNumber);
                }
            },
            "json"
        );
    }

    function func_memberLine(){
       var obj = {expireTime:new Date(endTime),createTime:new Date(startTime),id:id};
        $.post(path + "/wxqrCode/ajaxGetStatisticsLineData", obj, function(data){
                if(data.status == "200"){
                    var legend_data = ['扫码次数','扫码人数','关注人数'];
                    var x_data = [];
                    var y_data = [];
                    var y1 = [];
                    var y2 = [];
                    var y3 = [];

                    $.each(data.data,function(i,d){
                        var x = d.staticTime.split("-");
                        x = x[0]+x[1]+x[2];
                        x_data.push(x);
                        y1.push(d.sweepNumber);
                        y2.push(d.sweepPeopleNumber);
                        y3.push(d.focusNumber);
                    });
                    y_data.push({name:'扫码次数',type:'line',smooth:true,data:y1});
                    y_data.push({name:'扫码人数',type:'line',smooth:true,data:y2});
                    y_data.push({name:'关注人数',type:'line',smooth:true,data:y3});
                    func_line("memberLine","",legend_data,x_data,y_data);
                }
            },"json");
    }



    function func_line(id,title,legend_data,x_data,y_data){

        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: title,
                x: 'left'
            },
            dataZoom: [
                {
                    show: true,
                    start: 40,
                    end: 60
                }
            ],
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top:26,
                data:legend_data
            },
            yAxis: {
                type : 'value'
            },
            xAxis: {
                data: x_data,
                boundaryGap : false
            },
            series: y_data
        };

        myChart.setOption(option);
        myChart.resize();
    }


    function func_dataTableReload(resetPaging) {
        if(resetPaging != undefined){
            myDataTable.ajax.reload(null,resetPaging);
        }else{
            myDataTable.ajax.reload();
        }
    }

    function func_dataTableReload1(resetPaging) {
        if(resetPaging != undefined){
            myDataTable1.ajax.reload(null,resetPaging);
        }else{
            myDataTable1.ajax.reload();
        }
    }
    function func_AjaxUrl() {
        return path + "/wxqrCode/ajaxGetStatisDataByPage";
    }
    function func_AjaxUrl1() {
        return path + "/wxqrCode/ajaxGetFocusDetailByPage";
    }
    function func_columns() {
        var jsonArr = [
            {"data": "staticTime"},
            {"data": "sweepNumber"},
            {"data": "sweepPeopleNumber"},
            {"data": "focusNumber"},
        ];
        return jsonArr;
    }
    function func_columns1() {
        var jsonArr = [
            {"data": "nickName"},
            {"data": "openId"},
            {"data": "createTime"}
        ];
        return jsonArr;
    }

    function func_ajaxData() {
        var jsonObject = new Object();
        jsonObject.createTime = new Date(startTime);
        jsonObject.expireTime = new Date(endTime);
        jsonObject.wqId=id;
        return jsonObject;
    }

    function dataTable() {
        return $('#myTable').DataTable({
            processing: true,
            ordering: false,
            searching: false,
            info: true,
            autoWidth: true,
            lengthChange: false,
            language: {
                emptyTable: '没有数据表',
                info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
                infoEmpty: '没有数据',
                lengthMenu: '每页显示 _MENU_ 条记录',
                loadingRecords: '正在加载数据....',
                processing: '正在处理数据....',
                zeroRecords: '没有找到匹配的记录',
                paginate: {
                    first: '首页',
                    previous: '前页',
                    next: '后页',
                    last: '尾页'
                }
            },
            order: [[1, 'desc']],
            pageLength: 10,
            pagingType: 'full_numbers',
            columnDefs: [{
                render: function (data, type, full) {
                    var result = "";

                    result = data;

                    return result;
                },
                targets: 0
            },{
                render: function (data, type, full) {
                    var result = "";
                    if (data==null || data==0){
                        return "-";
                    }
                    result = data;

                    return result;
                },
                targets: 1
            },{
                render: function (data, type, full) {
                    var result = "";
                    if (data==null ||data==0){
                        return "-";
                    }
                    result = data;

                    return result;
                },
                targets: 2
            },{
                render: function (data, type, full) {
                    var result = "";
                    if (data==null || data==0){
                        return "-";
                    }
                    result = data;

                    return result;
                },
                targets: 3
            }],
            columns: func_columns(),
            serverSide: true,
            ajax: {
                contentType: 'application/json;charset=utf-8',
                type: 'POST',
                url: func_AjaxUrl(),
                data: function (d) {
                    d.extra_search = func_ajaxData();
                    return JSON.stringify(d);
                }
            }
        });
    }


    function dataTable1() {
        return $('#myTable1').DataTable({
            processing: true,
            ordering: false,
            searching: false,
            info: true,
            autoWidth: true,
            lengthChange: false,
            language: {
                emptyTable: '没有数据表',
                info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
                infoEmpty: '没有数据',
                lengthMenu: '每页显示 _MENU_ 条记录',
                loadingRecords: '正在加载数据....',
                processing: '正在处理数据....',
                zeroRecords: '没有找到匹配的记录',
                paginate: {
                    first: '首页',
                    previous: '前页',
                    next: '后页',
                    last: '尾页'
                }
            },
            order: [[1, 'desc']],
            pageLength: 10,
            pagingType: 'full_numbers',
            columnDefs: [{
                render: function (data, type, full) {
                    var result = "";

                    result = data;

                    return result;
                },
                targets: 0
            },{
                render: function (data, type, full) {
                    var result = "";
                    if (data==0){
                        return "-";
                    }
                    result = data;

                    return result;
                },
                targets: 1
            },{
                render: function (data, type, full) {
                    var result = "";

                    result = formatDateTimeYMDHM(data);

                    return result;
                },
                targets: 2
            }],
            columns: func_columns1(),
            serverSide: true,
            ajax: {
                contentType: 'application/json;charset=utf-8',
                type: 'POST',
                url: func_AjaxUrl1(),
                data: function (d) {
                    d.extra_search = func_ajaxData();
                    return JSON.stringify(d);
                }
            }
        });
    }
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</html>